<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米布局案例2</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <div class="left">
            <a href="#">
                <img src="imgs/1.webp" alt="">
            </a>
        </div>
        <div class="right">

            <div class="card first">
                <a href="#" target="_blank">
                    <img src="imgs/2.webp" alt="">
                    <h3 class="title">小米MIX FOLD</h3>
                    <p class="info">折叠大屏 | 自研芯片</p>
                    <p class="price">9999元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/3.webp" alt="">
                    <h3 class="title">小米11 Ultra</h3>
                    <p class="info">1.12GN2 | 2K四微曲屏</p>
                    <p class="price">5999元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/4.webp" alt="">
                    <h3 class="title">小米11 Pro</h3>
                    <p class="info">1.12GN2 | 骁龙888</p>
                    <p class="price">4999元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/5.webp" alt="">
                    <h3 class="title">小米11 青春版</h3>
                    <p class="info">1.12GN2 | 2K四微曲屏</p>
                    <p class="price">2299元起</p>
                </a>
            </div>
            <div class="card first">
                <a href="#" target="_blank">
                    <img src="imgs/6.webp" alt="">
                    <h3 class="title">黑鲨4 Pro</h3>
                    <p class="info">黑鲨4 Pro</p>
                    <p class="price">3999元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/7.webp" alt="">
                    <h3 class="title">黑鲨4</h3>
                    <p class="info">黑鲨4 | 磁动力升降肩建</p>
                    <p class="price">2499元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/8.webp" alt="">
                    <h3 class="title">小米10S</h3>
                    <p class="info">1.12GN2 | 2K四微曲屏</p>
                    <p class="price">3299元起</p>
                </a>
            </div>
            <div class="card">
                <a href="#" target="_blank">
                    <img src="imgs/9.webp" alt="">
                    <h3 class="title">Redmi K40 Pro系列</h3>
                    <p class="info">1.12GN2 | 2K四微曲屏</p>
                    <p class="price">2799元起</p>
                </a>
            </div>
        </div>
    </div>
</body>

</html>